<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#box{
			width:10px; height: 10px; background: blue;
			position: absolute; left: 400px; top: 200px;
			border-radius: 50%;
		}
	</style>
	<script type="text/javascript">
		
		//缓冲运动
		onload = function(){
			var box = document.getElementById("box");
			var centerPoint = {x:box.offsetLeft, y:box.offsetTop};
			var degree = 0;
			
			setInterval(function(){
				box.style.left = centerPoint.x + 100*Math.cos(degree*Math.PI/180) + "px"; 
				box.style.top = centerPoint.y + 200*Math.sin(degree*Math.PI/180) + "px";
				degree++;
			},30);
		}
	</script>
	<body>
		<div id="box">
			
		</div>
		<div id="wall" style="width: 5px; height: 5px; position: absolute; left:400px; top: 200px; background: black;">
			
		</div>
	</body>
</html>
